<link rel="stylesheet" href="/src/style/formSelects-v4.css" />
<div class="layui-fluid">
    <div class="layui-breadcrumb jy-breadcrumb">
    </div>
        <div class="layui-card">
            <div class="layui-form">
                <div class="layui-card-body userEdit">
                    <div class="layui-form-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="name" value="" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">中文名</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" name="nike"  value="" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <select name="role_id"  type="select"  xm-select="select1">

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <input type="radio" class="field-status" name="status" value="1" title="启用" checked>
                                <input type="radio" class="field-status" name="status" value="2" title="禁用">
                            </div>
                        </div>

                        <div class="layui-form-item role-list-form" id="userEdit1">

                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="hidden" class="field-id" name="id">
                            <button type="submit" class="layui-btn " lay-submit="" lay-filter="formSubmit">提交</button>
                            <a href="javascript:history.go(-1);" class="layui-btn layui-btn-primary ml10"><i class="aicon ai-fanhui"></i>返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<script id="userEdit" type="text/html">
    {{# layui.each(d.menu_list, function(k, v){ }}
    <dl class="role-list-form-top">
        <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{v['id']}}" data-parent="0" data-level="1" lay-skin="primary" title="{{v['title']}}"></dt>
        <dd>
        {{# layui.each(v['childs'], function(kk, vv){ }}
    <dl>
    <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{vv['id']}}" data-pid="{{vv['pid']}}" data-level="2" lay-skin="primary" title="{{vv['title']}}"></dt>
        <dd>
        {{# layui.each(vv['childs'], function(kkk, vvv){ }}
    <dl>
    <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{vvv['id']}}" data-pid="{{vvv['pid']}}" data-level="3" lay-skin="primary" title="{{vvv['title']}}"></dt>
        <dd>
        {{# layui.each(vvv['childs'], function(kkkk, vvvv){ }}
    <input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{vvvv['id']}}" data-pid="{{vvvv['pid']}}" data-level="4" lay-skin="primary" title="{{vvvv['title']}}">
        {{# }); }}
    </dd>
    </dl>
    {{# }); }}
    </dd>
    </dl>
    {{# }); }}
    </dd>
    </dl>
    {{# }); }}
</script>
<script>
    layui.use(['admin', 'form', 'common', 'laytpl','formSelects'], function () {
        var $ = layui.$
            , form = layui.form
            , laytpl = layui.laytpl
            ,formSelects = layui.formSelects
            , tool = layui.common
            , view = layui.view;
        var id= layui.router().search.id;
        var getTpl = userEdit.innerHTML;
        tool.ajax({"data": {"id":id}, "type": "get"},
            function (data) {
            var arr=[];
                for (var i in data.data.role) {
                    var obj = {"name":data.data.role[i],"value":i};
                    arr.push(obj);
                }
                layui.formSelects.data('select1', 'local', {
                    arr: arr
                });
                if(data.data.user.role_id){
                    formSelects.value('select1', data.data.user.role_id.split(','));
                }

                tool.assign(data.data.user,'.userEdit');

                laytpl(getTpl).render(data.data, function (html) {
                    $('#userEdit1').append(html);
                    /* 权限赋值 */
                    if(data.data.permission.length>0){
                        var auth=data.data.permission;
                            for(var i in auth) {
                                $('.role-list-form input[value="'+auth[i]+'"]').prop('checked', true);
                            }
                    }
                    form.on('checkbox(roleAuth)', function(data) {
                        var child = $(data.elem).parent('dt').siblings('dd').find('input');
                        /* 自动选中父节点 */
                        var check_parent = function (id) {
                            var self = $('.role-list-form input[value="'+id+'"]');
                            var pid = self.attr('data-pid') || '';
                            self.prop('checked', true);
                            if (pid == '') {
                                return false;
                            }
                            check_parent(pid);
                        };
                        /* 自动选中子节点 */
                        child.each(function(index, item) {
                            item.checked = data.elem.checked;
                        });
                        check_parent($(data.elem).attr('data-pid'));
                        form.render('checkbox');
                    });

                })

                form.render();
                layui.form.on('submit(formSubmit)', function (data) {
                    tool.ajax({"data": data.field});
                })
            }
        );

    })
</script>